<template>
	<a-modal :centered="true" visible title="角色转移" width="416px" @cancel="CloseModal">
		<div class="role-transfer">
			<a-form ref="formRef" class="no-required-flag-form" layout="horizontal" :model="formData">
				<a-form-item
					v-show="stepNum === 1"
					label-align="left"
					name="oldSuperNewRoleId"
					:rules="[{ required: true, message: '请选择原超管账号的新角色' }]"
				>
					<div class="role-transfer-item">原超管账号角色</div>
					<a-select
						v-model:value="formData.oldSuperNewRoleId"
						style="width: 336px"
						placeholder="请选择"
						:get-popup-container="
							(triggerNode: any) => {
								return triggerNode.parentNode;
							}
						"
						:options="roleOpts"
					></a-select>
				</a-form-item>
				<a-form-item
					v-show="stepNum === 2"
					label-align="left"
					name="newSuperAdminId"
					:rules="[{ required: true, message: '请选择新账号' }]"
				>
					<div class="role-transfer-item">新超管账号</div>
					<a-select
						v-model:value="formData.newSuperAdminId"
						style="width: 336px"
						show-search
						placeholder="请选择"
						:default-active-first-option="false"
						:show-arrow="false"
						:filter-option="false"
						:not-found-content="null"
						:options="accountOpts"
						@search="SearchAccounts"
					></a-select>
				</a-form-item>
			</a-form>
		</div>

		<template #footer>
			<a-button class="btn-default" @click="CloseModal">取消</a-button>

			<a-button v-if="stepNum === 1" type="primary" @click="StepToNext">下一步</a-button>

			<a-button v-if="stepNum === 2" type="primary" :loading="loading" @click="SaveForm">确定</a-button>
		</template>
	</a-modal>
</template>

<script setup lang="ts" name="role-transfer">
import { g6Debounce, g6RegValidate } from 'glasssix-utils-ts';
import { message } from 'ant-design-vue';
import { useRoleSelects } from '@/global-hooks/selects.hooks';
import { RoleAPI } from '../../../api';
import { TsTransferForm, type TsAccountModalType } from '../../../type';

const props = withDefaults(defineProps<{ userId: string | number; type: TsAccountModalType }>(), {
	type: 'transfer',
	userId: ''
});

const emits = defineEmits<{
	(e: 'ok', flag: 'transfer'): void;
	(e: 'update:type', value: ''): void;
}>();

const loading = ref<boolean>(false);

const { roleOpts } = useRoleSelects();

const stepNum = ref(1);
const accountOpts = ref<TsSelectOption[]>();
const formRef = ref();
const formData = reactive<TsTransferForm>({
	oldSuperAdminId: props.userId,
	oldSuperNewRoleId: undefined,
	newSuperAdminId: undefined,
	changeSuperFlag: 1
});

const CloseModal = (): void => {
	emits('update:type', '');
};

const StepToNext = (): void => {
	formRef.value
		.validate('oldSuperNewRoleId')
		.then(() => (stepNum.value = 2))
		.catch((error: any) => {
			console.log(error);
		});
};

// 搜索账户(排除已绑定的)
const searchDebounce = g6Debounce(async (seachVal: string) => {
	const res: TsRes = await RoleAPI.search({ id: props.userId, select: seachVal });
	if (res.code === 0) {
		accountOpts.value = res.data;
	}
}, 300);

const SearchAccounts = (seachVal: string): void => {
	searchDebounce(seachVal);
};

const SaveForm = (): void => {
	g6RegValidate.formSubmit(formRef.value, async () => {
		try {
			loading.value = true;
			const res: TsRes = await RoleAPI.transfer(JSON.parse(JSON.stringify(formData)));
			if (res && res.code === 0) {
				message.success('超管账号转移成功');
				CloseModal();
				emits('ok', 'transfer');
			}
		} finally {
			loading.value = false;
		}
	});
};
</script>

<style lang="less">
.role-transfer {
	display: flex;
	padding: 40px 32px;
	justify-content: center;

	.role-transfer-item {
		margin-bottom: 8px;
		line-height: 22px; /* 157.143% */
		color: @text02;
	}

	.ant-select-selector {
		border: 1px solid @borderColor02 !important;
		border-radius: 6px !important;
		color: @text01 !important;
		background-color: transparent !important;
	}

	:where(.css-dev-only-do-not-override-kqecok).ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
		height: 36px !important;
	}
}
</style>
